<template>
  <div>
    <!-- 路由出口 -->
    <!-- 当我们的地址匹配到路由注册表的时候， router-view这个内置组件会替换成对应的component -->
    <router-view></router-view>


    <div>
      <!-- 路由导航 -->
      <!-- <router-link to="路由路径"> -->
      <!-- <router-link :to="{ name: '路由名称' }"> -->
      <router-link to="/home">首页</router-link>
      <!-- <router-link to="/about">关于</router-link> -->
      <router-link :to="{ name: 'About' }">关于</router-link>
      <hr>
      <button @click="toMy">点击跳转我的页面</button>
    </div>
  </div>
</template>


<script>
export default {
  name: 'App',
  methods: {
    toMy() {
      // 路由编程时导航
      this.$router.push('/my')
      // this.$router.push({ name: 'My' })
    }
  },
 
}
</script>


<style>
.router-link-active,.router-link-exact-active {
  color: red;
}
</style>